<!DOCTYPE html>
<html>
<head>
<title>JSquerys</title>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
<meta charset='utf-8'/>
<meta content='Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.' name='description'/>
<meta content='online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor' name='keywords'/>
<meta content='index, follow' name='robots'/>
<meta content='index, follow' name='googlebot'/>
<meta content='JSFiddle' name='author'/>
<meta content='share alike' name='copyright'/>
<script src='../js/moo-clientcide-1.3.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/lib/codemirror.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/mode/javascript/javascript.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/mode/css/css.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/mode/xml/xml.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/mode/htmlmixed/htmlmixed.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/mode/coffeescript/coffeescript.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/addon/search/searchcursor.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/codemirror/addon/edit/matchbrackets.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/jshint.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/emmet.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/Sidebar.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/LayoutCM.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/Actions.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/Resources.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/EditorCM.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/Settings.js?nojobofferinsidebar' type='text/javascript'></script>
<script src='../js/heyoffline.js?nojobofferinsidebar' type='text/javascript'></script>
<script src="../mooshellmedia/js/clientcide.2.2.0.js" type="text/javascript" charset="utf-8"></script>
<!--meta name="viewport" content="width=device-width, maximum-scale=0.5" /-->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='yes' name='apple-touch-fullscreen'/>
<link href='../css/normalize.css?nojobofferinsidebar' rel='stylesheet' type='text/css'/>
<link href='../css/tricks.css?nojobofferinsidebar' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='../js/codemirror/lib/codemirror.css?nojobofferinsidebar' rel='stylesheet' type='text/css'/>
<link href='http://jsfiddle.net/favicon.png' rel='icon'/>
<!--[if lte IE 7]> <script src="/js/lte-ie7.js"></script> <![endif]-->
<link href='../css/screen.css?nojobofferinsidebar' rel='stylesheet' type='text/css'/>
<link href='../css/light.css?nojobofferinsidebar' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
var csspath = "/css/",
    jspath = "/js/",
    imgpath = "/img/",
    mediapath = "/mooshellmedia/",
    codemirrorpath = "/codemirror/",
    panel_html = 'html',
    panel_css = 'css',
    panel_js = 'javascript',
    makefavouritepath = "/_make_favourite/",
    example_server = "http://jsfiddle.net",
    username = "dharlaferdana",
    static_hash = "nojobofferinsidebar",
    csrfToken = Cookie.read('csrftoken'),
    mooshell,
    preload_resources;

Layout.skin = ""; // "light"
window.addEvent('domready', function () {
    if (panel_js != 'javascript' && $('jslint')) {
        $('jslint').getParent('li').hide();
    }

    $extend(Layout, new Events());
    mooshell = new MooShellActions({
        example_id: '',
        exampleURL: "",
        exampleSaveUrl: '/_save/',
        loadDependenciesURL: '/_get_dependencies/{lib_id}/',
        loadLibraryVersionsURL: '/_get_library_versions/{group_id}/',
    });
    new MooShellEditor.JS(document.id('id_code_js'), {
        language: panel_js
    }); // add user defined parameters
    new MooShellEditor.HTML(document.id('id_code_html'), {
        language: panel_html
    }); // add user defined parameters
    new MooShellEditor.CSS(document.id('id_code_css'), {
        language: panel_css
    }); // add user defined parameters
    Layout.render();

});
window.addEvent('load', function () {


    // show editors and content when the last editor loads
    // this will prevent flickering, plus looks nice
    document.id('content').setStyle('opacity', 1);
    document.id('sidebar').setStyle('opacity', 1);

    // always keep this at the bottom
    $$('select.panelChoice').each(function (sel) {
        this.switchLanguage(sel);
    }, mooshell);
});
</script>
<style>
#logo {
  width:240px;
  float:left;
  color:#0D253B;
  margin-top:12px;
  position:relative;
  text-align:left;
}
#logo h3 {
  color:#fff;
  font:bold 16px Arial,Sans-Serif;
  position:relative;
  width:122px;
  margin-left:55px;
}
#logo h3 span {
  color:#fff;
  font-size:11px;
  position:absolute;
  right:25px;
  bottom:1px;
}
#logo .cloud1 {
  width:35px;
  height:14px;
  background:#fff;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  position:absolute;
  bottom:0;
  left:10px;
  -webkit-box-shadow:0 1px 0 #000;
  -moz-box-shadow:0 1px 0 #000;
  box-shadow:0 1px 0 #000;
}
#logo .cloud2 {
  width:20px;
  height:20px;
  background:#fff;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  position:absolute;
  top:-4px;
  left:20px;
}
#logo .cloud3 {
  width:10px;
  height:10px;
  background:#fff;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  position:absolute;
  top:0;
  left:13px;
}
#logo .unlimit1 {
  border:2px solid #40709A;
  width:6px;
  height:6px;
  -webkit-border-radius:10px 0 10px 10px;
  -moz-border-radius:10px 0 10px 10px;
  border-radius:10px 0 10px 10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  position:absolute;
  bottom:4px;
  left:18px;
}
#logo .unlimit2 {
  border:2px solid #40709A;
  width:6px;
  height:6px;
  -webkit-border-radius:0 10px 10px 10px;
  -moz-border-radius:0 10px 10px 10px;
  border-radius:0 10px 10px 10px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  position:absolute;
  bottom:4px;
  left:28px;
}
.CodeMirror {
  line-height:1.3em;
  font-size:0.92em;
}
.CodeMirror-linenumber {
  font-size:0.9;
  line-height:1.2em;
}
#sidebar {font-size: 12px;width: 240px;}
#sidebar .toggler {font-size: 15px;}
#sidebar input[type="text"], #sidebar input[type="password"], #sidebar textarea {width: 209px;}
#sidebar #external-resources-form #external_resource {width: 180px;}
#sidebar .selectPanel .panelChoice, #sidebar .selectPanel .selectFake {width: 102px;}
#actions {font-size: 14px;}
#content {margin: 14px 15px 0px 255px;}
.icon-signal:before,.icon-pencil:before,.icon-paper-clip:before,.icon-ok:before,.icon-star:before, {font-size: 13.5px;}
.icon-play:before,.icon-group:before {font-size: 12px;}
</style>


</head>
<body>


<h1>Test your JavaScript, CSS, HTML or CoffeeScript online with JSquerys code editor.</h1>
<h2>online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor</h2>

<form action='http://fiddle.jshell.net/_display/' id='show-result' method='post' target='result'>
<input name='username' type='hidden' value='dharlaferdana'/>
<div style='display:none'><input name='csrfmiddlewaretoken' type='hidden' value='ScAWlI5pNLG5rcLq0s64uXghaIBTWdA7'/></div>
<div id='header'>
<div id='logo'>
<div class='cloud1'></div>
<div class='cloud2'></div>
<div class='cloud3'></div>
<div class='unlimit1'></div>
<div class='unlimit2'></div>
<h3>JSQUERYS<span>&alpha;</span></h3>
</div>
<div id='actions'>
<ul class='actionCont collapsed' id='toggleSidebarUl'>
<li class='actionItem'><a class='aiButton' href='#toggle-sidebar' id='toggleSidebar' title='Toggle sidebar'><span>Hide sidebar</span></a></li>
</ul>
<ul class='actionCont collapsed'>
<li class='actionItem'>
<a class='aiButton' href='#run' id='run' title='Run (CTRL + Return)'><span class='icon-play'></span>Run</a>
</li>
<li class='actionItem'>
<a class='aiButton' data-draft='1' href='#mobile' id='mobile' title='Debug on mobile'><span class='icon-signal'></span></a>
</li>
<li class='actionItem'>
<a class='aiButton' href='#save' id='savenew' title='Save new Fiddle (CTRL + S)'><span class='icon-pencil'></span>Save</a>
</li>
<li class='actionItem'>
<a class='aiButton' href='#fork' id='savenew' title='Fork into a new Fiddle'><span class='icon-code-fork'></span>Fork</a>
</li>
<li class='actionItem'>
<a class='aiButton' href='#base' id='is_favourite' title='This is the base version'><span class='icon-star'></span>Base</a>
</li>
<li class='actionItem'>
<a class='aiButton' href='#tidy' id='tidy' title='Re-indent messy code'><span class='icon-paper-clip'></span>TidyUp</a>
</li>
<li class='actionItem'>
<a class='aiButton' href='#jshint' id='jslint' title='Run JSHint on the code'><span class='icon-ok'></span>JSHint</a>
</li>
<li class='actionItem'>
<a class='aiButton' href='#showjs' id='showjscode' title='Show JavaScript code'><span class='icon-pencil'></span>Show JS</a>
</li>
<li class='actionItem'>
<a class='aiButton' href='#collaborate' id='collaborate' title=''><span class='icon-group'></span>Collaboration</a>
</li>
</ul>
<ul class='actionCont dropdown'>
<li class='actionItem'>
<a class='aiButton dropdownTrigger' href='#share' id='share' title='Share this Fiddle'>Share<span class='icon-caret-down'></span></a>
<div class='dropdownCont'>
<div class='dcWrapper'>
<div id='share_links_dropdown'>
<p>
<label for='share_link_dropdown'>Share link</label>
<input class='share' id='share_link_dropdown' type='text' value='Test post'/>
</p>
<p>
<label for='share_result_dropdown'>Share full screen result</label>
<input class='share' id='share_result_dropdown' type='text' value='http://jsquerys.blogspot.com/2014/07/test-post.html'/>
</p>
<p>
<label for='share_embedded_dropdown'>Embed on your page (<a href='http://querys.blogspot.com/use/embedding.html'>embed options</a>)</label>
<input id='share_embedded_dropdown' type='text' class='share' value='<iframe style="width: 100%; height: 300px;" src="http://jsquerys.blogspot.com/2014/07/test-post.html" frameborder="0"></iframe>'/>
</p>
</div>
<ul id='share-social'>
<li class='ssItem twitter'><span class='icon-twitter'></span><a href='http://twittter.com/share?url=http://jsquerys.blogspot.com/2014/07/test-post.html' rel='nofollow' target='_blank' title='Click to send this page to Twitter!'>Share on Twitter</a></li>
<li class='ssItem facebook'><span class='icon-facebook'></span><a href='http://www.facebook.com/sharer.php?u=http://jsquerys.blogspot.com/2014/07/test-post.html' rel='nofollow' target='_blank' title='Post to Facebook'>Post to Facebook</a></li>
</ul>
</div>
</div>
</li>
</ul>
<ul class='actionCont dropdown right'>
<!-- <li class="actionItem jobboard"><a class="aiButton" href="http://jsquerys.blogspot.com"><span class="icon-bullhorn"></span>JSquerys Job Board</a></li> -->
<li class='actionItem'>
<a class='aiButton dropdownTrigger' href='#username' id='usermenu' title='You&#39;re logged in as dharlaferdana'>dharlaferdana<span class='icon-user'></span></a>
<div class='dropdownCont'>
<div class='dcWrapper'>
<ul>
<li><a href='/user/dashboard/' id='dashboard' title='Dashboard'>Dashboard</a></li>
<li><a href='/user/dharlaferdana/querys/' id='fiddles' title='Your Public Querys'>Your Public Querys</a></li>
<li><a href='/user/dashboard/edit/' id='personal-settings' title='Personal Settings'>Personal Settings</a></li>
<li><a href='/user/change_password/' id='change-password' title='Change password'>Change password</a></li>
<li><a href='/user/logout/' id='logout' title='Logout'>Logout</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id='sidebar'>
<script type='text/javascript'>
  var DP;
  window.addEvent('domready', function(){
    DP = new Dropdown();
  });
</script>
<h3 class='toggler active' id='settings_toggler'>Frameworks & Extensions</h3>
<div class='element' id='shell_settings'>
<div class='elementBody'>
<div class='ebCont'>
<select id='js_lib' name='js_lib'>
<optgroup label='Mootools'>
<option value='59'>Mootools (nightly)</option>
<option value='210'>Mootools 1.5.0 (nocompat)</option>
<option value='208'>Mootools 1.5.0</option>
<option value='96'>Mootools 1.4.5 (compat)</option>
<option value='95'>Mootools 1.4.5</option>
<option value='63'>Mootools 1.3.2 (compat)</option>
<option value='62'>Mootools 1.3.2</option>
<option value='144'>Mootools 1.2.6</option>
</optgroup>
<optgroup label='jQuery'>
<option value='146'>jQuery 2.x (edge)</option>
<option value='188'>jQuery 2.1.0</option>
<option value='157'>jQuery 2.0.2</option>
<option value='46'>jQuery 1.x (edge)</option>
<option value='186'>jQuery 1.11.0</option>
<option value='156'>jQuery 1.10.1</option>
<option value='131'>jQuery 1.9.1</option>
<option value='112'>jQuery 1.8.3</option>
<option value='101'>jQuery 1.7.2</option>
<option value='75'>jQuery 1.6.4</option>
</optgroup>
<optgroup label='Prototype'>
<option value='54'>Prototype 1.7.1</option>
<option value='4'>Prototype 1.6.1.0</option>
</optgroup>
<optgroup label='YUI'>
<option value='204'>YUI 3.16.0</option>
<option value='182'>YUI 3.14.0</option>
<option value='153'>YUI 3.10.1</option>
<option value='130'>YUI 3.8.0</option>
<option value='123'>YUI 3.7.3</option>
<option value='118'>YUI 3.6.0</option>
<option value='102'>YUI 3.5.0</option>
<option value='74'>YUI 3.4.1 simple</option>
<option value='73'>YUI 3.4.1</option>
<option value='9'>YUI 2.8.0r4</option>
</optgroup>
<optgroup label='Glow'>
</optgroup>
<optgroup label='No-Library'>
<option selected='selected' value='11'>No-Library (pure JS)</option>
</optgroup>
<optgroup label='Dojo'>
<option value='87'>Dojo (nightly)</option>
<option value='212'>Dojo 1.10.0</option>
<option value='202'>Dojo 1.9.3</option>
<option value='200'>Dojo 1.8.6</option>
<option value='198'>Dojo 1.7.5</option>
<option value='196'>Dojo 1.6.2</option>
<option value='194'>Dojo 1.5.3</option>
</optgroup>
<optgroup label='Processing.js'>
<option value='206'>Processing.js 1.4.7</option>
<option value='135'>Processing.js 1.4.1</option>
<option value='81'>Processing.js 1.3.6</option>
<option value='67'>Processing.js 1.2.3</option>
</optgroup>
<optgroup label='ExtJS'>
<option value='147'>ExtJS 4.2.0</option>
<option value='80'>ExtJS 4.1.1</option>
<option value='107'>ExtJS 4.1.0</option>
<option value='109'>ExtJS 3.4.0</option>
<option value='23'>ExtJS 3.1.0</option>
<option value='24'>ExtJS 3.0.0</option>
</optgroup>
<optgroup label='Raphael'>
<option value='76'>Raphael 2.1.0</option>
<option value='36'>Raphael 1.5.2 (min)</option>
<option value='30'>Raphael 1.4</option>
</optgroup>
<optgroup label='RightJS'>
<option value='136'>RightJS 2.3.1</option>
<option value='45'>RightJS 2.1.1</option>
</optgroup>
<optgroup label='Three.js'>
<option value='82'>Three.js r54</option>
</optgroup>
<optgroup label='Zepto'>
<option value='90'>Zepto 1.0rc1</option>
</optgroup>
<optgroup label='Enyo'>
<option value='115'>Enyo (nightly)</option>
<option value='145'>Enyo 2.2.0</option>
<option value='121'>Enyo 2.1</option>
<option value='116'>Enyo 2.0.1</option>
</optgroup>
<optgroup label='Shipyard'>
<option value='99'>Shipyard (nightly)</option>
<option value='105'>Shipyard 0.2</option>
</optgroup>
<optgroup label='Knockout.js'>
<option value='172'>Knockout.js 3.0.0</option>
<option value='163'>Knockout.js 2.3.0</option>
<option value='122'>Knockout.js 2.2.1</option>
<option value='117'>Knockout.js 2.1.0</option>
<option value='104'>Knockout.js 2.0.0</option>
</optgroup>
<optgroup label='The X Toolkit'>
<option value='106'>The X Toolkit edge</option>
</optgroup>
<optgroup label='AngularJS'>
<option value='180'>AngularJS 1.2.1</option>
<option value='137'>AngularJS 1.1.1</option>
</optgroup>
<optgroup label='Ember'>
<option value='190'>Ember 1.3.1</option>
</optgroup>
<optgroup label='Underscore'>
<option value='160'>Underscore 1.4.4</option>
<option value='133'>Underscore 1.4.3</option>
<option value='111'>Underscore 1.3.3</option>
</optgroup>
<optgroup label='Bonsai'>
<option value='120'>Bonsai 0.4.1</option>
</optgroup>
<optgroup label='KineticJS'>
<option value='139'>KineticJS 4.3.1</option>
<option value='124'>KineticJS 4.0.5</option>
</optgroup>
<optgroup label='FabricJS'>
<option value='178'>FabricJS 1.4.0</option>
<option value='161'>FabricJS 1.2.0</option>
<option value='125'>FabricJS 0.9</option>
</optgroup>
<optgroup label='qooxdoo'>
<option value='126'>qooxdoo 2.1</option>
<option value='127'>qooxdoo 2.0.3</option>
</optgroup>
<optgroup label='D3'>
<option value='134'>D3 3.0.4</option>
</optgroup>
<optgroup label='CreateJS'>
<option value='170'>CreateJS 2013.09.25</option>
</optgroup>
<optgroup label='WebApp Install'>
<option value='142'>WebApp Install 0.1</option>
</optgroup>
<optgroup label='Thorax'>
<option value='174'>Thorax 2.0.0rc6</option>
<option value='143'>Thorax 2.0.0rc3</option>
</optgroup>
<optgroup label='Paper.js'>
<option value='158'>Paper.js 0.22</option>
</optgroup>
<optgroup label='React'>
<option value='192'>React 0.9.0</option>
<option value='184'>React 0.8.0</option>
<option value='166'>React 0.4.0</option>
<option value='159'>React 0.3.2</option>
</optgroup>
<optgroup label='svg.js'>
<option value='162'>svg.js 0.x (latest)</option>
</optgroup>
<optgroup label='Minified'>
<option value='164'>Minified 1.0 beta1</option>
</optgroup>
<optgroup label='jTypes'>
<option value='165'>jTypes 2.1.0</option>
</optgroup>
<optgroup label='Lo-Dash'>
<option value='167'>Lo-Dash 2.2.1</option>
</optgroup>
<optgroup label='Brick'>
<option value='176'>Brick edge</option>
</optgroup>
</select>
<ul id='js_dependency'>

</ul>
<select id='id_js_wrap' name='js_wrap'>
<option selected='selected' value='l'>onLoad</option>
<option value='d'>onDomready</option>
<option value='h'>No wrap - in &lt;/head&gt;</option>
<option value='b'>No wrap - in &lt;/body&gt;</option>
</select>
</div>
</div>
</div>
<script type='text/javascript'>
  window.addEvent('load', function() {
    $('js_lib').addEvent('change', function() {
      mooshell.loadDependencies(this.value);
    })
    if ($('library_group')) $('library_group').addEvent('change', function() {
      mooshell.loadLibraryVersions(this.value);
    })
  });
</script>
<h3 class='toggler' id='about_toggler'>Querys Options</h3>
<div class='element'>
<div class='elementBody'>
<div class='ebCont'>
<p>
<label>
<input id='id_title' maxlength='255' name='title' placeholder='Name your querys' type='text' value=''/>
</label>
</p>
<p>
<label>
<textarea cols='40' id='id_description' name='description' placeholder='Description' rows='10'></textarea>
</label>
</p>
<p id='normalize_check'>
<input id='id_normalize_css' name='normalize_css' type='checkbox'/>
<label for='id_normalize_css'>Normalized CSS</label><br/>
</p>
<p>
<label>Body tag
<input id='id_body_tag' maxlength='255' name='body_tag' type='text'/>
</label>
</p>
<p>
<label>DTD
<select name='doctype'>
<option id='dtd_XHTML 1.0 Strict' value='1'>XHTML 1.0 Strict</option>
<option id='dtd_XHTML 1.0 Transitional' value='2'>XHTML 1.0 Transitional</option>
<option id='dtd_HTML 5' selected='selected' value='3'>HTML 5</option>
<option id='dtd_HTML 4.01 Strict' value='4'>HTML 4.01 Strict</option>
<option id='dtd_HTML 4.01 Transitional' value='5'>HTML 4.01 Transitional</option>
<option id='dtd_HTML 4.01 Frameset' value='6'>HTML 4.01 Frameset</option>
</select>
</label>
</p>
<p class='libraryTagAttributes'>
<label>
Framework & attribute
<input id='id_js_lib_option' maxlength='255' name='js_lib_option' placeholder='ie. data-type=""' type='text' value=''/>
</label>
</p>
</div>
</div>
</div>
<h3 class='toggler' id='resources_toggler'>External Resources</h3>
<div class='element' id='resources_element'>
<div class='elementBody'>
<div class='ebCont'>
<div id='external-resources-form'>
<input id='external_resource' placeholder='JavaScript/CSS URI' type='text' value=''/>
<a class='submit' href='#' id='add_external_resource' title='Add resource'><span class='icon-plus'></span></a>
</div>
<input id='external_resources_id' name='add_external_resources' type='hidden' value=''/>
<ul id='external_resources_list'>
<script type='text/javascript'>var resources = [];</script>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>
  var default_text = 'JavaScript/CSS URL',
      add_external_resource_url = "/_add_external_resource/";
</script>
<h3 class='toggler' id='pannels_toggler'>Languages</h3>
<div class='element' id='panels_settings'>
<div class='elementBody'>
<div class='ebCont'>
<div class='selectPanel'>
<select class='panelChoice panelChoiceSelect html' data-panel='html' data-panel_id='id_code_html' disabled='disabled' id='panel_html_choice' name='panel_html'>
<option data-mime-type='text/xml' selected='selected' value='0'>HTML</option>
</select>
<select class='panelChoice panelChoiceSelect css' data-panel='css' data-panel_id='id_code_css' id='panel_css_choice' name='panel_css'>
<option data-mime-type='text/css' selected='selected' value='0'>CSS</option>
<option data-mime-type='text/css' value='1'>SCSS</option>
</select>
<select class='panelChoice panelChoiceSelect js' data-panel='js' data-panel_id='id_code_js' id='panel_js_choice' name='panel_js'>
<option data-mime-type='text/javascript' selected='selected' value='0'>JavaScript</option>
<option data-mime-type='text/x-coffeescript' value='1'>CoffeeScript</option>
<option data-mime-type='application/javascript;version=1.7' value='2'>JavaScript 1.7</option>
</select>
<span class='selectFake panelChoice result'>Results</span>
</div>
</div>
</div>
</div>
<h3 class='toggler'>Ajax Requests</h3>
<div class='element'>
<div class='elementBody'>
<div class='ebCont'>
<p>Echo apis are created to simulate Ajax calls:
<code>/echo/json/</code> for JSON,
<code>http://jsquerys.net/echo/jsonp/</code> for JSONP,
<code>/echo/html/</code> for HTML and
<code>/echo/xml/</code> for XML.
</p>
<p>Please <a href='http://jsquerys.blogspot.com' target='_new'>read API documentation</a> and follow
<a href='#' onclick='Layout.sidebar.accordion.display(Layout.sidebar.accordion.togglers.indexOf($(&#39;examples_toggler&#39;)))'>examples</a>.
</p>
</div>
</div>
</div>
<h3 class='toggler'>Legal, Credits and Links</h3>
<div class='element'>
<div class='elementBody'>
<div class='ebCont'>
<p>Created and maintained by <a href='http://webdev.zalewa.info' target='_credits' title='Piotr&#39;s homepage'>Piotr</a> and <a href='https://twitter.com/' target='_credits' title=''>Oskar</a>.</p>
<p>Hosted by <a href='https://www.digitalocean.com/' target='_credits'>DigitalOcean</a>.</p>
<p>Special thanks to <a href='http://mootools.net' target='_new'>MooTools</a> community.</p>
<p><strong>License</strong></p>
<p>All code belongs to the poster and no license is enforced.</p>
<p>JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.</p>
<p><strong>Links</strong></p>
<p>Please read the <a href='http://kom4.blogspot.com' target='_new'>documentation</a>.<br/>
For updates please follow <a href='http://jsquerys.blogspot.com/'>our blog</a>,
<a href='http://twitter.com/jsquerys/' target='_new'>tweets</a>
or <a href='http://www.facebook.com/' target='_new'>become a fan</a>.</p>
</div>
</div>
</div>
<a href='#' id='job' target='_blank'></a>
<a class='keyActions' href='#keyboard'>Keyboard shortcuts</a>
</div>
<div class='main section' id='main'><div class='widget Blog' id='Blog1'>
<div id='content'>
<input id='id_version' name='version' type='hidden'/>
<input id='id_slug' name='slug' type='hidden' value=''/>
<fieldset class='column left'>
<div class='window top' data-panel_type='html' id='panel_html'>
<textarea cols='40' id='id_code_html' name='code_html' rows='10'></textarea>
<span class='window_label'>HTML</span>
</div>
<div class='handler handler_horizontal'></div>
<div class='window bottom' data-panel_type='js' id='panel_js'>
<textarea cols='40' id='id_code_js' name='code_js' rows='10'></textarea>
<span class='window_label'>JavaScript</span>
</div>
<div class='shim'></div>
</fieldset>
<div class='handler' id='handler_vertical'></div>
<fieldset class='column right'>
<div class='window top' data-panel_type='css' id='panel_css'>
<textarea cols='40' id='id_code_css' name='code_css' rows='10'></textarea>
<span class='window_label'>CSS</span>
</div>
<div class='handler handler_horizontal'></div>
<div class='window bottom' id='result'>
<iframe id='freview' frameBorder='0' name='result'></iframe>
<span class='window_label'>Result</span>
</div>
<div class='shim'></div>
</fieldset>
</div>
</div></div>

</form>
<script type='text/javascript'>
  TogetherJSConfig_enableAnalytics = true;
  TogetherJSConfig_cloneClicks = "#run, .toggler";
  TogetherJSConfig_toolName = "Collaboration"
</script>
<script src='../js/togetherjs.js'></script>


</body>
</html>